import React, {Component} from 'react'

//import {Link} from 'react-keeper'

import {Link, CacheLink} from 'react-keeper'

import 'src/styles/tabBar.less'
import {GETTABBAR} from "../const/shareUri";
import Ajax from 'src/assets/js/fetch'

export default class tabBar extends Component {
  constructor(props) {
    super(props)
    this.state = {
      navs: []
    }
  }

  componentDidMount() {
    this._getTabBar();
  }

  render() {
    return (
        <div className="page-tabbar">
          <ul className="nav navbar-nav flex-row">
            {
              this.state.navs.map((item, index) =>
                  <li key={index} className="flex-grow-1 flex-y-center flex-x-center">
                    <Link to={item.url} className="flex-grow-1">
                      <span className="barIcon">
                       <img src={item.icon} alt=""/>
                      </span>
                      {item.name}
                    </Link>
                  </li>
              )
            }
          </ul>
        </div>
    )
  }

  _getTabBar() {
    Ajax.get(GETTABBAR, {}, res => {
      this.setState({navs: res.data.navs})
      //console.log(this.state.navs);
    })
  }

}